<template>
  <Drawer
    width="50%"
    title="成员管理"
    placement="right"
    v-model:visible="visible"
    :footer-style="{ textAlign: 'right' }"
    @close="onclose"
  >
    <template #closeIcon>
      <ArrowLeftOutlined />
    </template>

    <Form ref="formRef">
      <FormItem label="用户组名" name="name">
        {{ name }}
      </FormItem>
      <FormItem label="操作用户" name="policyId">
        <Transfer
          v-model:target-keys="targetKeys"
          :data-source="mockData"
          :show-search="showSearch"
          :filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
          :show-select-all="false"
          @change="onChange"
        >
          <template #children="{ direction, filteredItems, selectedKeys, onItemSelectAll, onItemSelect }">
            <Table
              :row-selection="
                getRowSelection({
                  selectedKeys,
                  onItemSelectAll,
                  onItemSelect,
                })
              "
              :columns="direction === 'left' ? leftColumns : rightColumns"
              :data-source="filteredItems"
              size="small"
              :rowKey="
                (record) => {
                  return record.key;
                }
              "
              :custom-row="
                ({ key }) => ({
                  onClick: () => {
                    onItemSelect(key, !selectedKeys.includes(key));
                  },
                })
              "
            />
          </template>
        </Transfer>
      </FormItem>
    </Form>
    <template #footer>
      <Button style="margin-right: 8px" type="primary" @click="submit">提交</Button>
      <Button @click="onclose">取消</Button>
    </template>
  </Drawer>
</template>
<script lang="ts" setup>
import { Drawer, Form, FormItem, message, Button, Transfer, Table } from 'ant-design-vue';
import { ref } from 'vue';
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import { reallocateUser } from '/@/api/work-order/userManagement/userGroup/userGroup';
import { WorksheetUserItem } from '/@/api/work-order/userManagement/userGroup/model/userGroupModel';

const visible = ref(false);
const name = ref();
const groupId = ref();

const formRef = ref();
type tableColumn = Record<string, string>;
const mockData = ref<WorksheetUserItem[]>([]);
let originTargetKeys = [] as string[];
const getOriginTargetKeys = () => {
  originTargetKeys = [{ groupIdList: [123, 234, 345], id: 88, name: 'aaaa', userGroup: '123,456,789', key: '88' }].map(
    (item) => item.key
  );
};
getOriginTargetKeys();
const targetKeys = ref<string[]>(originTargetKeys);

const openManage = async (record) => {
  name.value = record.name;
  groupId.value = record.id;

  mockData.value = [
    { groupIdList: [123, 234, 345], id: 88, name: 'aaaa', userGroup: '123,456,789', key: '88' },
    { groupIdList: [123, 234, 345], id: 99, name: 'bbbbb', userGroup: '123,456,789', key: '99' },
  ];
  visible.value = true;
};

const leftTableColumns = [
  {
    dataIndex: 'name',
    title: '用户名',
  },
  {
    dataIndex: 'userGroup',
    title: '用户组',
  },
];
const rightTableColumns = [
  {
    dataIndex: 'name',
    title: '用户名',
  },
];

const showSearch = ref<boolean>(false);
const leftColumns = ref<tableColumn[]>(leftTableColumns);
const rightColumns = ref<tableColumn[]>(rightTableColumns);

const getRowSelection = ({ selectedKeys, onItemSelectAll, onItemSelect }: Record<string, any>) => {
  return {
    onSelectAll(selected: boolean, selectedRows: Record<string, string | boolean>[]) {
      const treeSelectedKeys = selectedRows.map(({ key }) => key);
      onItemSelectAll(treeSelectedKeys, selected);
    },
    onSelect({ key }: Record<string, string>, selected: boolean) {
      onItemSelect(key, selected);
    },
    selectedRowKeys: selectedKeys,
  };
};

const emit = defineEmits(['submitSuccess']);
const submit = async () => {
  if (targetKeys.value.length !== 0) {
    let userIdList = targetKeys.value.forEach((item) => {
      return Number(item);
    });
    let reallocateParam = {
      groupId: groupId.value,
      userIdSet: userIdList,
    };
    let res = await reallocateUser(reallocateParam);
    if (res) {
      message.success('分配成功');
    }
    emit('submitSuccess');
  } else {
    message.error('分配成员不能为空');
  }
};
const onclose = () => {
  visible.value = false;
};

defineExpose({ openManage });
</script>
